<template>
    <div>
        <div class="pay">
            <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="确认订单" left-arrow
                @click-left="$router.go(-1)" />
            <div class="payRes">
                <div class="resImg">
                    <img src="../../../src/assets/noRes.jpg" alt="">
                </div>
                <van-button @click="toConfirm" style="border: 1px solid #e7bfb6;color: #e45b6a;width: 100%;
                height: .76rem;border-radius: .38rem;" plain type="primary">重新支付</van-button>
            </div>
            <div class="middRes">
                <p style="color:#000;font-weight: 700;font-size: .35rem;">看看其他</p>
                <p style="color: #a8a9ab;font-size: .25rem;">舞匣除了买票，还可以加入官方社群，寻找同类哦</p>
            </div>
            <div class="joinCrowd">
                <div class="topCrowd">
                    <p style="color:#000;font-weight: 700;font-size: .3rem;margin-bottom: .15rem;">全国街舞交流2群</p>
                    <p style="color: #a8a9ab;font-size: .25rem;">来自全国街舞舞者一起来交流~</p>
                </div>
                <van-button class="litBtn" type="primary">加入社群</van-button>
            </div>
            <div class="joinCrowd">
                <div class="topCrowd">
                    <p style="color:#000;font-weight: 700;font-size: .3rem;margin-bottom: .15rem;">全国街舞交流2群</p>
                    <p style="color: #a8a9ab;font-size: .25rem;">来自全国街舞舞者一起来交流~</p>
                </div>
                <van-button class="litBtn" type="primary">加入社群</van-button>
            </div>
            <div class="joinCrowd">
                <div class="topCrowd">
                    <p style="color:#000;font-weight: 700;font-size: .3rem;margin-bottom: .15rem;">全国街舞交流2群</p>
                    <p style="color: #a8a9ab;font-size: .25rem;">来自全国街舞舞者一起来交流~</p>
                </div>
                <van-button class="litBtn" type="primary">加入社群</van-button>
            </div>
            <div class="joinCrowd">
                <div class="topCrowd">
                    <p style="color:#000;font-weight: 700;font-size: .3rem;margin-bottom: .15rem;">全国街舞交流2群</p>
                    <p style="color: #a8a9ab;font-size: .25rem;">来自全国街舞舞者一起来交流~</p>
                </div>
                <van-button class="litBtn" type="primary">加入社群</van-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import { areaList } from '@vant/area-data';
export default {
    name: 'payResult',
    data() {
        return {
        }
    },
    computed: {

    },
    methods: {
        toConfirm() {
            this.$router.push({
                path: '/confirmOrder',
                query: {

                }
            })
        },
        getInfo(){

        // this.$axios.get(`qrGroup/2023091721402221436600010028`, this.addUsers).then((res) => {
        //     console.log(res)
        // });
        }
    },
    async created() {
        this.getInfo()
    }
}
</script>
  
<style lang="less" scoped>
.joinCrowd {
    background: #fff;
    padding: .2rem;
    width: 100%;
    border-radius: .3rem;
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: .2rem;
    position: relative;

    .topCrowd {
        height: 100%;
    }

    .litBtn {
        height: .7rem;
        border-radius: .35rem;
        border: none;
        background: linear-gradient(to right, #eb5766, #ed7d6e);
        position: absolute;
        right: .2rem;
        top: 50%;
        transform: translate(0, -50%);
    }
}

.payRes {
    background: #fff;
    width: 100%;
    padding: .4rem;
    border-radius: .3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: .2rem;

    .resImg {
        margin-bottom: .2rem;
    }
}

.middRes {
    text-align: center;
    margin-bottom: .2rem;

    p {
        width: 100%;
        line-height: .55rem;
    }
}

.pay {
    padding: .25rem .25rem 25vh;
    font-size: .3rem;
    background: #f3f4f6;
    min-height: 100vh;
}
</style>
  